/**
 * @project         Jx
 * @revision        $Id: form.css 827 2010-04-01 14:22:49Z fred.warnock $
 * @author          Fred Warnock (fwarnock@dmsolutions.ca)
 * @copyright       (c) 2006 DM Solutions Group Inc.
 */

/* =========== */
/* FORM STYLES */
/* =========== */
/* JxForm classes are a set of styles that can be used for laying out forms 
 * There are three different types of layouts: Inline, Inlineblock and Block.
 * Each can be used to layout an entire form, a fieldset or an individual input.
 */

/* debuggiong styles */
/*
.jxForm           { background-color: yellow; }
.jxFieldset       { background-color: khaki; }
.jxInputGroup     { background-color: tan; }
.jxFieldsetLegend { background-color: orange; }
.jxInputContainer { background-color: pink; }
.jxInputLabel     { background-color: plum; }
.jxInputTag       { background-color: lime; }
*/

 /* Base and Typography Styles */
 
.jxForm {
  display: block;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #000;
}

.jxFieldset {
  display: block;
  position: relative;
  border: 1px solid #ccc;
  margin: 10px;
  padding: 5px;
}

.jxFieldsetLegend,
.jxFieldset legend {
  position: relative;
  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 26px;
  color: #000;
}

.jxInputContainer {
  display: block;
  position: relative;
  padding: 0px;
  margin: 2px;
  border: none;
}

.jxInputLabel,
.jxInputTag {
  display: -moz-inline-box;
  display: inline-block;
  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 26px;
  color: #000;
}

.jxInputLabel {
  vertical-align: top;
}

.jxInputTag {
  vertical-align: bottom;
}

.jxInputWrapper {
  display: inline-block;
  white-space: normal;
  position: relative;
}

.jxInputText,
.jxInputPassword,
.jxInputTextarea,
.jxInputCombo,
.jxInputColor {
  margin: 0px 4px;
  padding: 4px;
  border: 1px solid #bbb;
  /* overall width is 250px, margins+padding+border is 18px */
  width: 232px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #000;
}

.jxInputCombo,
.jxInputColor {
  padding: 4px 20px 4px 20px;
  /* overall width is 250px, margins+padding+border is 50px */
  width: 200px;
}

.jxInputIconHidden .jxInputCombo {
  /* overall width is 250px, margins+padding+border is 34px */
  padding-left: 4px;
  width: 216px;
}

.jxInputIcon {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 0px;
  top: 0px;
  margin: 4px 4px 4px 8px;
}

.jxInputContainerColor .jxInputIcon {
  border: 1px solid #bbb;
  width: 15px;
  height: 15px;
}

.jxInputIconHidden .jxInputIcon {
  display: none;
}

.jxInputRevealer {
  position: absolute;
  width: 16px;
  height: 16px;
  right: 0px;
  top: 0px;
  margin: 4px 8px 4px 4px;
  font-size: 0px;
  line-height: 0px;
}

img.jxInputRevealerIcon {
  background-image: url(images/emblems.png);
  background-position: right -16px;
  background-repeat: no-repeat;
}

.jxInputRevealer .jxButtonContainer,
.jxInputRevealer .jxButton {
  padding: 0px;
  margin: 0px;
  border: 0px;
  background-color: transparent;
  background-image: none;
}

.jxInputSelect {
  margin: 0px 4px;
  padding: 3px 4px 3px 1px;
  border: 1px solid #bbb;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #000;
}

.jxInputRadio,
.jxInputCheck {
  margin: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #000;
}

.jxInputText:focus,
.jxInputPassword:focus,
.jxInputTextarea:focus,
.jxInputSelect:focus,
.jxInputCombo:focus,
.jxInputColor:focus {
  border: 1px solid #000;
}

.jxInputContainer .jxButtonContainer {
  padding: 0px;
  margin: 0px 4px;
}

/* Input Group */

.jxInputGroup {
  border: none;
  padding: 0px;
  margin: 2px;
}

.jxInputGroup legend {
  font-size: 0px;
  line-height: 0px;
  padding: 0px;
  margin: 0px;
  border: none;
}

.jxInputGroup .jxFieldsetLegend {
  font-size: 12px;
}

.jxInputGroup .jxInputLabel {
  width: auto;
}

/* Field Validation */

.jxFieldError .jxInputText,
.jxFieldError .jxInputPassword,
.jxFieldError .jxInputTextarea,
.jxFieldError .jxInputSelect,
.jxFieldError .jxInputCombo,
.jxFieldError .jxInputColor {
  background-color: #FBE3E4; 
  color: #8a1f11; 
  border-color: #FBC2C4;
}

.jxFieldSuccess .jxInputText,
.jxFieldSuccess .jxInputPassword,
.jxFieldSuccess .jxInputTextarea,
.jxFieldSuccess .jxInputSelect,
.jxFieldSuccess .jxInputCombo,
.jxFieldSuccess .jxInputColor {
  background-color: #E6EFC2; 
  color: #264409; 
  border-color: #C6D880;
}

.jxFieldError .jxInputText:focus,
.jxFieldError .jxInputPassword:focus,
.jxFieldError .jxInputTextarea:focus,
.jxFieldError .jxInputSelect:focus,
.jxFieldError .jxInputCombo:focus,
.jxFieldError .jxInputColor:focus {
  border-color: #8a1f11;
}

.jxFieldSuccess .jxInputText:focus,
.jxFieldSuccess .jxInputPassword:focus,
.jxFieldSuccess .jxInputTextarea:focus,
.jxFieldSuccess .jxInputSelect:focus,
.jxFieldSuccess .jxInputCombo:focus,
.jxFieldSuccess .jxInputColor:focus {
  border-color: #264409;
}

.jxFieldError .jxInputLabel,
.jxFieldError .jxInputTag {
  color: #8a1f11; 
}

.jxFieldSuccess .jxInputLabel,
.jxFieldSuccess .jxInputTag {
  color: #264409; 
}


/* For Reference
   Success, notice and error boxes from Blueprint */

/* 
.error      { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }
.notice     { background: #FFF6BF; color: #514721; border-color: #FFD324; }
.success    { background: #E6EFC2; color: #264409; border-color: #C6D880; }
.error a    { color: #8a1f11; }
.notice a   { color: #514721; }
.success a  { color: #264409; }
*/



/* INLINE FORM 
 * Sets up form elements to work as inline objects like they do by default
 * These styles rely on increasing specificity to provide overrides */

/* Inline Input Container */
.jxFormInline .jxInputContainer,
form .jxFormInline .jxInputContainer,
form .jxFieldset span.jxFormInline,
form.jxForm span.jxFormInline {
  display: inline;
}

/* Inline Label */
.jxFormInline .jxInputLabel,
form .jxFormInline .jxInputLabel,
form span.jxFormInline .jxInputLabel {
  display: inline;
  width: auto;
}

/* Inline Tag */
.jxFormInline .jxInputTag,
form .jxFormInline .jxInputTag,
form span.jxFormInline .jxInputTag {
  display: inline;
}

/* Inline Input Group */
.jxFormInline .jxInputGroup,
form .jxFormInline .jxInputGroup {
  padding-left: 0px;
}

.jxFormInline .jxInputGroup .jxFieldsetLegend,
form .jxFormInline .jxInputGroup .jxFieldsetLegend {
  position: relative;
  left: auto;
}

.jxFormInline .jxInputGroup .jxInputLabel,
form .jxFormInline .jxInputGroup .jxInputLabel {
  display: inline;
  width: auto;
}


/* BLOCK FORM 
 *  Sets up form elements to work as block objects so they can appear stacked */

/* Block Input Container */
.jxFormBlock .jxInputContainer,
form .jxFormBlock .jxInputContainer,
form .jxFieldset span.jxFormBlock,
form.jxform span.jxFormBlock {
  display: block;
}
 
/* Block Label */
.jxFormBlock .jxInputLabel,
form .jxFormBlock .jxInputLabel,
form span.jxFormBlock .jxInputLabel {
  display: block;
  width: auto;
  margin-left: 4px;
}

/* Checks and Radios Label
 * Most inputs are preceeded by their labels, but in the case of radio buttons
 * and checkboxes, the inputs are followed by their labels */
.jxFormBlock .jxInputContainerCheck .jxInputLabel,
.jxFormBlock .jxInputContainerRadio .jxInputLabel,
form .jxFormBlock .jxInputContainerCheck .jxInputLabel,
form .jxFormBlock .jxInputContainerRadio .jxInputLabel,
form span.jxFormBlock .jxInputContainerCheck .jxInputLabel,
form span.jxFormBlock .jxInputContainerRadio .jxInputLabel {
  display: -moz-inline-box;
  display: inline-block;
}

/* Block Input Group */
.jxFormBlock .jxInputGroup,
form .jxFormBlock .jxInputGroup {
  padding-left: 0px;
}

.jxFormBlock .jxInputGroup .jxFieldsetLegend,
form .jxFormBlock .jxInputGroup .jxFieldsetLegend {
  position: relative;
  left: auto;
}

.jxFormBlock .jxInputGroup .jxInputLabel,
form .jxFormBlock .jxInputGroup .jxInputLabel {
  display: -moz-inline-box;
  display: inline-block;
  width: auto;
}


/* INLINE-BLOCK FORM 
 * Sets up form elements to work as inline-block objects so labels can have set 
 * widths to simulate a 2 column display for label / input pairs. */

/* Inline-Block Input Container */
.jxFormInlineblock .jxInputContainer,
form .jxFormInlineblock .jxInputContainer,
form .jxFieldset span.jxFormInlineblock,
form.jxForm span.jxFormInlineblock {
  display: block;
  white-space: nowrap;
}

/* Inline-Block Label */
.jxFormInlineblock .jxInputLabel,
form .jxFormInlineblock .jxInputLabel,
form span.jxFormInlineblock .jxInputLabel {
  display: -moz-inline-box;
  display: inline-block;
  width: 200px;
}

/* Inline-Block Input Group */
.jxFormInlineblock .jxInputGroup,
form .jxFormInlineblock .jxInputGroup {
  padding-left: 200px;
}

.jxFormInlineblock .jxInputGroup .jxFieldsetLegend,
form .jxFormInlineblock .jxInputGroup .jxFieldsetLegend {
  position: absolute;
  left: -200px; /* for ie? */
  width: 200px;
}

.jxFormInlineblock .jxInputGroup .jxInputLabel,
form .jxFormInlineblock .jxInputGroup .jxInputLabel {
  display: -moz-inline-box;
  display: inline-block;
  width: auto;
}

/** Jx.Grid Overrides **/

.jxGridCellContent .jxInputContainer,
.jxGridCellContent .jxInputRadio,
.jxGridCellContent .jxInputCheck {
  display: inline;
  position: relative;
  border: none;
  margin: 0px;
  padding: 0px;
  font-size: 0px;
  line-height: 0px;
  color: #000;
}